<template>
	<view>
		
		<el-drawer :close-on-click-modal="false" body-class="body-class" :close-on-press-escape="false" modal-class="viewdrawer" @open="drawer_open" :z-index="10" v-model="drawer" title="I am the title"
			:with-header="false" size="55%" :before-close="handleClose">
			<view class="posire  bgfff pg40 " style="height:94.5%;border-top-left-radius: 10px;">
				<view @click="drawer=false" class="posiab flex-ju-c closeview">
					<image mode="widthFix" class="width50 ml10" src="/static/img/cclose.png"></image>
				</view>
				<view class="flex-ju-b">
					<view class="size36 color333 bold flex-a-i  ">
						<view class="wh6-30 mt8 bg2C7BFF mr15"></view>待参加会议
					</view>

					<view class="flex-a-i">
						<view class="seathview posire flex-a-i mr20">
						
							<el-input clearable @change="mettingChang" v-model="mettingSou" :suffix-icon="Search"
								class="width500" placeholder="请输入会议主题/发起人搜索"></el-input>

							<!-- <image mode="heightFix" class="image posiab right60 height40"
								src="/static/img/suosuo.png">
							</image>
							<image mode="heightFix" class="image posiab right100 height32"
								src="/static/img/guanbi.png">
							</image> -->

						</view>
						<view @click="onHistory" class="flex-a-i color2569ff">历史会议
							<image mode="heightFix" class="image height48" src="/static/img/lright.png">
							</image>
						</view>
					</view>
				</view>

				<view v-if="isdata" class="flex-ju-c flex-col size28 color666">
					<image mode="heightFix" class="image height320" src="/static/img/nohuiyi.png">
					</image>
					暂无会议
				</view>

				<view v-for="(item,k) in meetinglist" :key="k" @mouseenter="onTreatMeeting(k)" :class="k==index?'active':''" class="bgf4f8f9 borderfff pg30 ra20 mt30 flex-ju-b">
					<view class="">
						<view class="flex-a-i mb20">
							<view v-if="istime(item.start_dtm)" class="color165FFF bgE6EFFA wh104-40 nowrap flex-ju-c size24">
								未开始
							</view>
							
							<view v-else class="colorF2A521 bgF9F1E6  wh104-40 nowrap flex-ju-c size24">
								进行中
							</view>
							
							
							<view class="size32 ml20 one ">{{item.mr_name}}
								<view v-if="item.launcher_usr_id == userId"
									style="background: rgba(22,95,255,0.10);"
									class="wh40-40 ra40 color165FFF size24 flex-ju-c">
									我
								</view>
							</view>
						</view>
						<view class="flex-a-i color666">
							<image mode="heightFix" class="image mr10 height40" src="/static/img/yonghu.png">
							</image>
							{{item.launcher_usr_nick_name?item.launcher_usr_nick_name:item.launcher_usr_name}}
							<template v-if="item.weekly_period==1111111">
								<image mode="heightFix" class="image ml50 mr10 height40" src="/static/img/zhouqi.png">
								</image>
								永久
							</template>
							<template v-if="item.weekly_period>0">
								<image mode="heightFix" class="image ml50 mr10 height40" src="/static/img/zhouqi.png">
								</image>周期
								<!-- // {{item.weekly_period>0?'周期':'单次'}} -->
							</template>


							<view class="wh2-40 bgB4B9BF ml50"></view>
							<image mode="heightFix" class="image ml50 mr10 height40" src="/static/img/time.png">
							</image>
							{{item.start_dtm?timeTamp(item.start_dtm):timeTamp(item.create_dtm)}}
						</view>
					</view>

					<view v-if="k==index" class="flex-a-i">
						
						<view class="flex-a-i" v-if="item.launcher_usr_id != userId">
							<el-button @click="callNow(item)" v-if="!istime(item.start_dtm)" class="bg165FFF"
								type="primary">加入</el-button>
								<view @click="cellclick($event,k)" style="cursor: pointer;" class="wh116-60 ra10 flex-ju-c color165FFF border165FFF ml30">详情</view>
						</view>
						
						<template v-else>
							<view class="flex-a-i" v-if="!istime(item.start_dtm)">
								<el-button @click="callNow(item)" v-if="!istime(item.start_dtm)" class="bg165FFF"
									type="primary">加入</el-button>
									<view @click="cellclick($event,k)" style="cursor: pointer;" class="wh116-60 ra10 flex-ju-c color165FFF border165FFF ml30">详情</view>
							</view>
								
							<el-popover v-else placement="bottom" trigger="hover">
								<template #reference>
									<image @mouseenter="hoverImg(item,k)" mode="heightFix" class="image ml50 mr10 height62"
										src="/static/img/sandian.png"></image>
								</template>
							
								<el-table @cell-click="cellclick($event,k)"  row-class-name="table-row" cell-class-name="table-row" class="no-border-table" :show-header="false"
									:data="gridData">
									<el-table-column property="date" label="date" />
								</el-table>
							
							</el-popover>
						</template>
						
						
						
					</view>

				</view>

			</view>

			<el-drawer v-if="0" :close-on-click-modal="false" body-class="bodyclass" :close-on-press-escape="false" @open="drawerOpen" :z-index="15" size="53%" modal-class="viewdrawer1" v-model="innerDrawer1"
				:with-header="false" title="I'm inner Drawer" :append-to-body="true" :before-close="handleClose">
				<view class="posire">
					<view @click="drawer=false" class="posiab flex-ju-c closeview">
						<image mode="widthFix" class="width50 ml10" src="/static/img/cclose.png"></image>
					</view>
				<view class="flex-ju-b">
					<view @click="innerDrawer=false" class="size36 color333 bold flex-a-i  ">
						<image mode="heightFix" class="image height48" src="/static/img/leftt.png">
						</image>
						历史会议
					</view>
					<view class="flex-a-i">
						<view class="seathview posire flex-a-i ">
							<view class="width500">
								<el-input  placeholder="请输入会议主题/发起人搜索"></el-input>
							</view>
							<image mode="heightFix" class="image posiab right60 height40" src="/static/img/suosuo.png">
							</image>
							<image mode="heightFix" class="image posiab right160 height32" src="/static/img/guanbi.png">
							</image>

						</view>
						<view @click="showlost" class="flex-a-i color2569ff">{{check_box_detail?'取消':'管理'}}</view>
					</view>
				</view>

				<scroll-view scroll-y @scrolltolower="scrolltolower" style="height:82vh;" class="width1000 scroll-view">
					<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
						<el-checkbox :class="check_box_detail?'':'wCheckcls'" style="height:200rpx;" class="wCheck width1000"
							v-for="(item,y) in histories" :value="item.id" :key="y" >
							<view @mouseenter="handleMouseEnter(y)">
								<view class="flex-a-i mt30">
									<!-- <el-checkbox v-model="checked1" /> -->
									<!-- <view class="flex-ju-b width1000 size28 ml20 color666">
				 			<view>12月15日 星期四</view>
				 			<view>2024年</view>
				 		</view> -->
								</view>
								<view class="flex-a-i bgf4f8f9 width1000 ">
									<!-- <el-checkbox v-model="checked1" /> -->
									<view class=" pg30 ra20 mt10  ml20 flex-ju-b width1000">
										<view class="">
											<view class="flex-a-i mb20">
												<view class="">
													<!-- <image mode="heightFix" class="image mr10 height40"
														src="/static/img/huchu.png">
													</image> -->
												</view>
												<view class="size32  one">{{item.mrName}}
													<!-- <view v-if="item.userId == user.userId"
														style="background: rgba(22,95,255,0.10);"
														class="wh40-40 ra40 color165FFF size24 flex-ju-c">
														我
													</view> -->
												</view>
											</view>
											<view class="flex-a-i color666">
												<image mode="heightFix" class="image mr10 height40"
													src="/static/img/yonghu.png">
												</image>
												<view class="one ">
													{{item.userId}}
												</view>

												<!-- <image mode="heightFix" class="image ml50 mr10 height40"
													src="/static/img/zhouqi.png">
												</image>
												单次 -->
												<view class="wh2-40 bgB4B9BF ml50"></view>
												<image mode="heightFix" class="image ml50 mr10 height40"
													src="/static/img/time.png">
												</image>
												{{timeTamp(item.launchDtms)}}
												<view class="ml50">
													会议号：{{item.mrId}}
												</view>
											</view>
										</view>
										<!-- <view class="posiab right20" v-if="y==boxindex">
											<el-button @click="showHistory(item,y)" class="bg165FFF"
												type="primary">详情</el-button>
											<el-button @click="$refs.pingjia.open()" class="border165FFF">评价</el-button>
										</view> -->
									</view>
								</view>
							</view>
						</el-checkbox>


					</el-checkbox-group>
				</scroll-view>

				<view v-if="check_box_detail" class="posifi bottom30 " style="width:53%;">
					<view class="flex-ju-b width1000 ">
						<view class="flex-a-i size28 color666">
							<el-checkbox class="mr15" v-model="checkAll" :indeterminate="isIndeterminate"
								@change="handleCheckAllChange" />全选
						</view>
						<view class="flex-a-i mr50">
							<view  @click="showlost" class="wh152-64 borderd0d6dc flex-ju-c ra5">取消</view>
							<view @click="$refs.upHistory.show()" class="wh152-64 bgfc474c colorfff flex-ju-c ml60 ra5">删除
							</view>
						</view>
					</view>
				</view>
				
				<tishi ref="upHistory" @confirm="delHistory" isexit="1" isclen="1" bgcolor="#fc474c" title="您确定要删除选中的历史会议记录吗？"></tishi>
			</view>
			</el-drawer>

		</el-drawer>
		
		
		<el-drawer :close-on-click-modal="false" body-class="body-class" :close-on-press-escape="false" @open="drawerOpen" :z-index="15" size="55%" modal-class="viewdrawer" v-model="innerDrawer"
			:with-header="false" title="I'm inner Drawer"  :before-close="handleClose">
			<view class="posire bgfff pg40 " style="height:94.5%;border-top-left-radius: 10px;">
				<view @click="innerDrawer=false" class="posiab flex-ju-c closeview">
					<image mode="widthFix" class="width50 ml10" src="/static/img/cclose.png"></image>
				</view>
			<view class="flex-ju-b">
				<view @click="innerDrawer=false" class="size36 color333 bold flex-a-i  ">
					<image mode="heightFix" class="image height48" src="/static/img/leftt.png">
					</image>
					历史会议
				</view>
				<view class="flex-a-i">
					<view class="seathview posire flex-a-i ">
						<view class="width500">
							<el-input  placeholder="请输入会议主题/发起人搜索"></el-input>
						</view>
						<image mode="heightFix" class="image posiab right60 height40" src="/static/img/suosuo.png">
						</image>
						<image mode="heightFix" class="image posiab right160 height32" src="/static/img/guanbi.png">
						</image>
		
					</view>
					<view @click="showlost" class="flex-a-i color2569ff">{{check_box_detail?'取消':'管理'}}</view>
				</view>
			</view>
		
			<scroll-view scroll-y @scrolltolower="scrolltolower" style="height:82vh;" class="width1000 scroll-view">
				<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
					<el-checkbox :class="check_box_detail?'':'wCheckcls'" style="height:200rpx;" class="wCheck width1000"
						v-for="(item,y) in histories" :value="item.id" :key="y" >
						<view @mouseenter="handleMouseEnter(y)">
							<view class="flex-a-i mt30">
								<!-- <el-checkbox v-model="checked1" /> -->
								<!-- <view class="flex-ju-b width1000 size28 ml20 color666">
			 			<view>12月15日 星期四</view>
			 			<view>2024年</view>
			 		</view> -->
							</view>
							<view class="flex-a-i bgf4f8f9 width1000 ">
								<!-- <el-checkbox v-model="checked1" /> -->
								<view class=" pg30 ra20 mt10  ml20 flex-ju-b width1000">
									<view class="">
										<view class="flex-a-i mb20">
											<view class="">
												<!-- <image mode="heightFix" class="image mr10 height40"
													src="/static/img/huchu.png">
												</image> -->
											</view>
											<view class="size32  one">{{item.mrName}}
												<!-- <view v-if="item.userId == user.userId"
													style="background: rgba(22,95,255,0.10);"
													class="wh40-40 ra40 color165FFF size24 flex-ju-c">
													我
												</view> -->
											</view>
										</view>
										<view class="flex-a-i color666">
											<image mode="heightFix" class="image mr10 height40"
												src="/static/img/yonghu.png">
											</image>
											<view class="one ">
												{{item.userId}}
											</view>
		
											<!-- <image mode="heightFix" class="image ml50 mr10 height40"
												src="/static/img/zhouqi.png">
											</image>
											单次 -->
											<view class="wh2-40 bgB4B9BF ml50"></view>
											<image mode="heightFix" class="image ml50 mr10 height40"
												src="/static/img/time.png">
											</image>
											{{timeTamp(item.launchDtms)}}
											<view class="ml50">
												会议号：{{item.mrId}}
											</view>
										</view>
									</view>
									<!-- <view class="posiab right20" v-if="y==boxindex">
										<el-button @click="showHistory(item,y)" class="bg165FFF"
											type="primary">详情</el-button>
										<el-button @click="$refs.pingjia.open()" class="border165FFF">评价</el-button>
									</view> -->
								</view>
							</view>
						</view>
					</el-checkbox>
		
		
				</el-checkbox-group>
			</scroll-view>
		
			<view v-if="check_box_detail" class="posifi bottom30 " style="width:53%;">
				<view class="flex-ju-b width1000 ">
					<view class="flex-a-i size28 color666">
						<el-checkbox class="mr15" v-model="checkAll" :indeterminate="isIndeterminate"
							@change="handleCheckAllChange" />全选
					</view>
					<view class="flex-a-i mr170">
						<view  @click="showlost" class="wh152-64 borderd0d6dc flex-ju-c ra5">取消</view>
						<view @click="$refs.upHistory.show()" class="wh152-64 bgfc474c colorfff flex-ju-c ml60 ra5">删除
						</view>
					</view>
				</view>
			</view>
			
			<tishi ref="upHistory" @confirm="delHistory" isexit="1" isclen="1" bgcolor="#fc474c" title="您确定要删除选中的历史会议记录吗？"></tishi>
		</view>
		</el-drawer>

		<tishi @confirm="clodeyue" isexit="1" ref="huiyi" :isclen="1" bgcolor="#165fff" title="您确定要取消该预约会议吗？"></tishi>
		<!-- 会议详情 -->
		<meeting-detail :meetinginfo="meetinginfo" ref="upMeetingDetail"></meeting-detail>
		
	</view>
</template>

<script>
	import {
		Search
	} from '@element-plus/icons-vue'
	export default {
		name: "meeting-drawer",
		data() {
			return {
				index:-1,
				userId:uni.getStorageSync('sdkinfo').id,
				histories: [],
				pageNum: '1',
				meetinginfo: {},
				gridData: [{
						type: "1",
						date: '编辑',
					},
					{
						type: "2",
						date: '详情',
					},
					{
						type: "3",
						date: '取消预约',
					},
				],
				schedule_id: "",
				check_box_detail: false,
				Search,
				mettingSou: "",
				drawer: false,
				checkedCities: [],
				meetinglist: [],
				meetinglists: [],
				isdata: false,
				innerDrawer: false,
				isIndeterminate: true,
				boxindex: -1,
				checkAll: false,
				total:"",
				reasonable:true
			};
		},
		methods: {
			onTreatMeeting(index){
				this.index=index
			},
			// if (this.cname) {
			// 	var sdf = []
			// 	this.mlist.filter(item => {
			// 		if (item.display_name.toLowerCase().includes(this.cname.toLowerCase())) {
			// 			sdf.push(item)
			// 		}
			// 	})
			// 	this.clist = sdf
			// } else {
			// 	this.clist = this.mlist
			// }
			open() {
				this.drawer = true
			},
			//删除历史记录
			delHistory(){
				uni.showLoading()
				this.http('/HistoryMeetingScore/score/remove',
					this.checkedCities
				,'post').then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:"删除成功",
						icon:"none"
					})
					this.histories=[]
					setTimeout(()=>{
						this.pageNum='1'
						this.drawerOpen()
					},700)
				})
			},
			//预约管理
			showlost() {
				this.check_box_detail = !this.check_box_detail 
				this.checkedCities=[]
				this.checkAll=false
			},
			handleMouseEnter(e) {
				this.boxindex = e
			},
			handleCheckedCitiesChange(value) {
				const checkedCount = value.length
				this.checkAll = checkedCount === this.histories.length
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.histories.length
			},
			handleCheckAllChange(val) {
				var arr = []
				this.histories.map(item => {
					arr.push(item.id)
				})

				this.checkedCities = val ? arr : [],
				this.isIndeterminate = false
			},
			callNow(item) {
				let room_cuid = item.mr_id ? item.mr_id : item.cuid
				window.Invalidpin = 0
				if (item.launcher_usr_id == uni.getStorageSync('user').user.meetingId) {
					this.call_now(room_cuid, item.ctrl_pwd)
				} else {
					this.$emit('onSetRoomCuid', room_cuid)
					this.call_now(room_cuid)
				}

			},
			call_now(room_cuid, ctrl_pwd) {
				uni.showLoading()
				let meetingService = uni.getStorageSync('meetingService')
				if (ctrl_pwd) {
					zjsdk3.make_call_now(meetingService.meetingIp, meetingService.port, room_cuid, ctrl_pwd, uni
						.getStorageSync('user').user.nickName,uni.getStorageSync('sdkinfo').account)
				} else {
					zjsdk3.make_call_now(meetingService.meetingIp, meetingService.port, room_cuid, '', uni.getStorageSync(
						'user').user.nickName,uni.getStorageSync('sdkinfo').account)
				}
			},
			//预约详情
			showHistory(item) {
				this.$refs.upMeetingDetail.open()
			},
			cellclick(q, index) {
				if (q.type == 3) {
					if (this.meetinglist[index].schedule_id) {
						this.schedule_index = index
						this.schedule_id = this.meetinglist[index].schedule_id
						this.$refs.huiyi.show()
					} else {
						if (!this.istime(this.meetinglist[index].start_dtm)) {
							uni.showToast({
								title: "不能取消",
								icon: "none"
							})
						} else {
							uni.showToast({
								title: "权限不足",
								icon: "none"
							})
						}

					}
				} else if (q.type == 1) {
					if (this.meetinglist[index].schedule_id) {
						this.drawer = false
						uni.navigateTo({
							url: "./meeting?schedule_id=" + this.meetinglist[index].schedule_id
						})
					} else {
						uni.showToast({
							title: "不能编辑",
							icon: "none"
						})
					}

					// 
				} else {
					this.meetinginfo = this.meetinglist[index]
					this.$refs.upMeetingDetail.open()

				}
			},
			hoverImg(item, index) {
				var data = [{
					type: "2",
					date: '详情',
				}]
				if (this.istime(item.start_dtm)) {
					if(item.launcher_usr_id == this.userId){
						this.gridData = [{
								type: "1",
								date: '编辑',
							},
							{
								type: "2",
								date: '详情',
							},
							{
								type: "3",
								date: '取消预约',
							},
						]
					}else{
						this.gridData = data
					}
				} else {
					this.gridData = data
				}
			},
			
			//预约搜索
			mettingChang() {
				let arr = []
				if (this.mettingSou) {
					
					this.meetinglists.map(item => {
						if(item.launcher_usr_nick_name){
							if (item.mr_name.indexOf(this.mettingSou) != -1 || item.launcher_usr_nick_name.indexOf(this.mettingSou) != -1) {
								arr.push(item)
							}
						}else{
							if (item.mr_name.indexOf(this.mettingSou) != -1 || item.launcher_usr_name.indexOf(this.mettingSou) != -1) {
								arr.push(item)
							}
						}
						
					})
					this.meetinglist = arr
				} else {
					this.meetinglist = this.meetinglists
				}

				if (this.meetinglist.length) {
					this.isdata = false
				} else {
					this.isdata = true
				}

			},
			//取消预约
			clodeyue() {
				loginMgr.del_schedule(this.schedule_id).then(res => {
					if (res.result == 0) {
						this.meetinglist.splice(this.schedule_index, 1)
						this.$refs.huiyi.close()
						if (this.meetinglist.length) {
							this.isdata = false
						} else {
							this.isdata = true
						}
						uni.showToast({
							title: "取消成功",
							icon: "none"
						})
					} else {
						ElMessage({
							message: res.reason,
							type: 'warning',
						})
					}
				})
			},

			handleClose(done) {
				done()
			},
			onHistory() {
				this.histories=[]
				this.reasonable=true
				this.pageNum=1
				this.innerDrawer = true
			},
			scrolltolower(){
				this.pageNum = +this.pageNum +1
				this.drawerOpen()
			},
			drawerOpen() {
				uni.showLoading()
				this.http('/HistoryMeetingScore/score/list', {
					pageSize: '10',
					pageNum: this.pageNum+'',
					reasonable:this.reasonable
				}).then(res => {
					uni.hideLoading()
					this.total=res.total
					// 计算总页数
					let totalPages = Math.ceil(res.total / 10);
					if(this.pageNum >= totalPages){
						this.reasonable=false
					}
					res.rows.map(item=>{
						if(item.delFlag==0){
							this.histories.push(item)
						}
					})
				})

			},
			drawer_open() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				var time = year + '/' + month + '/' + day + ' 00:00'
				var thistime = new Date(time).getTime() / 1000
				var endtiem = thistime + 604800
				this.meetinglist = []
				this.meetinglists = []
				uni.showLoading()
				loginMgr.get_all_meeting().then(res => {
					for (var key in res) {
						this.meetinglist.push(res[key])
						this.meetinglists.push(res[key])
					}
					loginMgr.get_schedules(thistime, endtiem).then((ress, m) => {
						uni.hideLoading()
						if (ress.length) {
							if(this.meetinglist.length){
								this.meetinglist.map(item=>{//过滤相同
									ress.map(items => {
										if(item.uuid != items.uuid){
											this.meetinglist.push(items)
											this.meetinglists.push(items)
										}
									})
								})
							}else{
								ress.map(items => {
									this.meetinglist.push(items)
									this.meetinglists.push(items)
								})
							}
							
						}
						if (this.meetinglist.length) {
							this.isdata = false
						} else {
							this.isdata = true
						}
					})

				})
			},
		}
	}
</script>

<style>
	
	/deep/ .table-row:hover {
		color:#165FFF;
		background: rgba(22,95,255,0.1) !important;;
	}
	
	 /deep/ .body-class{
		padding-left:42px;
		padding-top:0;
		padding-right:0;
		padding-bottom:0;
	}
	 
 /deep/ .el-drawer{
	 box-shadow:none;
		background-color: rgba(255, 0, 0, 0);
	}
	
 /deep/ .wCheckcls .el-checkbox__input {
		display: none;
	} 
	
	/deep/ .wCheck .el-checkbox__label {
		width: 100%;
	}
	/deep/ .ppphhh {
		z-index: 1000;
	}
 
	.closeview{
		width: 42px;
		height: 45px;
		background: #e8efff;
		border: 1px solid #ffffff;
		box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.10); 
		border-top-left-radius:25px;
		border-bottom-left-radius:25px;
		left:-42px;
		margin-top:20px;
	}
	.active{
		border:1px solid #165FFF;
		background: #fff;
	}
	
</style>